<template>
	<view class="container">

		<uni-section title="基本示例" type="line">
			<view class="example-body box">
				<uni-icons type="bars" size="50rpx" @click="toggle('left')"></uni-icons>
			</view>
		</uni-section>

		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content">
					<view class="closes">
						<uni-icons class="icond" type="closeempty" size="40rpx" @click="close"></uni-icons>
					</view>

					<uni-collapse class="aistitle">
						<uni-collapse-item title="新品上市">
							<view class="demodetile">
								<view>
									<text>全新上市</text>
								</view>

								<view>
									<text>外套</text>

									<text>帽子</text>

									<text>裙子</text>

									<text>裤子</text>
								</view>
								<text></text>
							</view>

						</uni-collapse-item>

					</uni-collapse>
					<uni-collapse class="aistitle">
						<uni-collapse-item title="新品上市">
							<view class="demodetile">
								<view>
									<text>全新上市</text>
								</view>

								<view>
									<text>外套</text>

									<text>帽子</text>

									<text>裙子</text>

									<text>裤子</text>
								</view>
								<text></text>
							</view>

						</uni-collapse-item>

					</uni-collapse>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'center',

			}
		},
		methods: {
			toggle(type) {
				this.type = type
				this.$refs.popup.open(type)
			},
			close() {
				this.$refs.popup.close()
			}


		}
	}
</script>
<style lang="scss">
	.popup-content {
		width: 600rpx;

		.closes {
			width: 100%;
			height: 100rpx;
			border-bottom: 1px solid #a5a5a5;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.icond {

				margin-right: 50rpx;
			}
		}
	}

	.uni-collapse-item__title-text {
		margin-top: 8rpx;
		position: relative;
		height: 100%;

		span {

			position: absolute;
			height: 100rpx;
			font-size: 35rpx;
			font-weight: 600;
			margin-left: 30rpx;

			left: 15rpx;

		}
	}

	.demodetile {
		width: 100%;

		view {

			text {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 80rpx;
				color: #000000;
				text-align: center;
			}
		}

		>:nth-child(1) {
			text {
				font-size: 30rpx;
			}

			text:nth-child(1) ::before {
				content: "";
				border-bottom: solid 1px black;
				display: block;
				width: 90rpx;
				transform: translate(-130rpx, 20rpx);
			}

			text:nth-child(1) ::after {
				content: "";
				border-bottom: solid 1px black;
				display: block;
				width: 90rpx;
				transform: translate(160rpx, -20rpx);
			}
		}

	}
</style>